export function bannerFn (bannerWrapper, timer) {
    
    let bannerContent = bannerWrapper.children[0],
        wrapperWidth = parseInt(window.innerWidth),
        bannerBox = bannerContent.children[0],
        bannerItem = bannerBox.children,
        prev = bannerContent.children[1],
        next = bannerContent.children[2],
        length = bannerItem.length,
        onoff = true,
        num = 0,
        that = this
    
    wrapperWidth = Math.max(1200, wrapperWidth)

    let newItem = bannerBox.getElementsByTagName('li')
        bannerBox.style.width = length*wrapperWidth+'px'
        bannerBox.style.left = 0;

    bannerContent.style.height = wrapperWidth*0.4932 + 'px'
    if(wrapperWidth <= 1200){
        // console.log('1')
        prev.style.cssText = `top: 50%; left: 50px;margin-top: -22px;`
        next.style.cssText = `top: 50%; right: 50px;margin-top: -22px;`
    } else if(wrapperWidth > 1200 && wrapperWidth < 1640){
        // console.log('2')
        prev.style.cssText = `top: 50%; left: 50%;margin-top: -22px; margin-left:-600px `
        next.style.cssText = `top: 50%; left: 50%;margin-top: -22px; margin-left:556px`
    } else {
        // console.log('3')
        prev.style.cssText = `top: 50%; left: 50%;margin-top: -22px; margin-left:-740px `
        next.style.cssText = `top: 50%; left: 50%;margin-top: -22px; margin-left:696px`
    }

    for (let i = 0; i < length; i++) {
        newItem[i].style.left = wrapperWidth*i +'px'
        newItem[i].style.width = wrapperWidth + 'px'
    }

    let nextFn = function next(){
        if(onoff){
            onoff = false
            num ++
            animation(bannerBox, {
                data: {
                    left:  -wrapperWidth*num
                }
            }, 500, function(){
                onoff = true;
                if(num == length-1){
                    bannerBox.style.left = 0
                    num = 0
                }
            })
        }
    }

    let prevFn = function next(){
        if(!onoff) return
        onoff = false
        if( num == 0 ){
            num = length-1;
            bannerBox.style.left = -num*wrapperWidth+ 'px'
        }
        console.log(num)
        num --
        animation( bannerBox, {
            data:{
                left: -wrapperWidth*num
            }
        },500,function (  ) {
            onoff = true;
        })
    }
    this.timer = setInterval(()=>{
        nextFn()
    }, 5000)
    
    
    addEvent(bannerContent, 'mouseenter', ()=>{
        clearInterval(that.timer)
    })
    addEvent(bannerContent, 'mouseleave', ()=>{
        clearInterval(that.timer)
        that.timer = setInterval(()=>{
            nextFn()
        }, 5000)
    })
    next.onclick = nextFn
    prev.onclick = prevFn
    // addEvent(window, 'blur', ()=>{
    //     clearInterval(that.timer)
    // })
    // addEvent(window, 'focus', ()=>{
    //     that.timer = setInterval(()=>{
    //         nextFn()
    //     }, 2000)
    // })
}

export function dynamicBanner(danamic){
    let winWidht = parseInt(window.innerWidth),
        mixWidth = Math.max(1200, winWidht),
        length = this.dynamicList.length,
        bannerWrapper =danamic && danamic.children[0]

    bannerWrapper.style.width = mixWidth*length + 'px'
    bannerWrapper.style.left = 0;

    setTimeout(() => {
        setDynamicBanner.call(this,danamic,bannerWrapper, length, mixWidth)
    })
    
}

function setDynamicBanner(danamic,bannerWrapper, length, mixWidth) {
    let bannerItem = bannerWrapper.children,
        prev = danamic.children[1],
        next = danamic.children[2],
        dynamicList = this.dynamicList,
        that = this,
        num = 0,
        onoff = false

    that.$set(that, 'bgImg', dynamicList[0].img)
    for (let i = 0; i < length; i++) {
        bannerItem[i].style.width = mixWidth + 'px';
    }

    prev.onclick = prevFn
    next.onclick = nextFn

    this.timer = setInterval(()=>{
        nextFn()
    }, 5000)

    addEvent(danamic, 'mouseenter', ()=>{
        clearInterval(that.timer)
    })
    addEvent(danamic, 'mouseleave', ()=>{
        clearInterval(that.timer)
        that.timer = setInterval(()=>{
            nextFn()
        }, 5000)
    })

    function prevFn() {
        if(onoff) return
        onoff = true
        if( num == 0 ){
            num = length-1;
            bannerWrapper.style.left = -num*mixWidth+ 'px'
        }
        num --
        that.$set(that, 'bgImg', dynamicList[num].img)
        animation( bannerWrapper, {
            data:{
                left: -mixWidth*num
            }
        },800,function (  ) {
            onoff = false;
        })

    }

    function nextFn() {
        if(onoff) return
        onoff = true
        num ++
        that.$set(that, 'bgImg', dynamicList[num].img)
        animation(bannerWrapper, {
            data: {
                left:  -mixWidth*num
            }
        }, 800, function(){
            onoff = false;
            if(num == length-1){
                bannerWrapper.style.left = 0
                num = 0
            }
        })
    }


}







function addEvent( obj , type , eFn ) {
    function fn(e , b){
        e = e || window.event;
        eFn.call( obj , e  ) //处理this指向跟event问题
    }
    if( window.addEventListener ){
        obj.addEventListener( type , fn ,false )
    } else {
        obj.attachEvent( 'on' + type , fn )
    }
    return fn; //把上面的fn函数return上面 上面用一个变量来接收  为了清除事件
}


function animation(ele,json,time,callback){
    window.requestAnimationFrame = window.requestAnimationFrame || function(fn){return setTimeout(fn,1000/60)};
    window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
    function getStyle(ele){return ele.currentStyle || getComputedStyle(ele);}
    var Tween = {
        Linear: {
            easeIn: function(t, b, c, d) { return c * t / d + b; }
        },
        Quad: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t + b;
            },
            easeOut: function(t, b, c, d) {
                return -c * (t /= d) * (t - 2) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t + b;
                return -c / 2 * ((--t) * (t - 2) - 1) + b;
            }
        },
        Cubic: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
                return c / 2 * ((t -= 2) * t * t + 2) + b;
            }
        },
        Quart: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return -c * ((t = t / d - 1) * t * t * t - 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
                return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
            }
        },
        Quint: {
            easeIn: function(t, b, c, d) {
                return c * (t /= d) * t * t * t * t + b;
            },
            easeOut: function(t, b, c, d) {
                return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
                return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
            }
        },
        Sine: {
            easeIn: function(t, b, c, d) {
                return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            },
            easeOut: function(t, b, c, d) {
                return c * Math.sin(t / d * (Math.PI / 2)) + b;
            },
            easeInOut: function(t, b, c, d) {
                return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
            }
        },
        Expo: {
            easeIn: function(t, b, c, d) {
                return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
            },
            easeOut: function(t, b, c, d) {
                return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
            },
            easeInOut: function(t, b, c, d) {
                if (t == 0) return b;
                if (t == d) return b + c;
                if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
            }
        },
        Circ: {
            easeIn: function(t, b, c, d) {
                return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
            },
            easeOut: function(t, b, c, d) {
                return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
            },
            easeInOut: function(t, b, c, d) {
                if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
            }
        },
        Elastic: {
            easeIn: function(t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a);
                return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            },
            easeOut: function(t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a);
                return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
            },
            easeInOut: function(t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d / 2) == 2) return b + c;
                if (!p) p = d * (.3 * 1.5);
                if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a);
                if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
            }
        },
        Back: {
            easeIn: function(t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * (t /= d) * t * ((s + 1) * t - s) + b;
            },
            easeOut: function(t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
            },
            easeInOut: function(t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
                return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
            }
        },
        Bounce: {
            easeIn: function(t, b, c, d) {
                return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
            },
            easeOut: function(t, b, c, d) {
                if ((t /= d) < (1 / 2.75)) {
                    return c * (7.5625 * t * t) + b;
                } else if (t < (2 / 2.75)) {
                    return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                } else if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                }
            },
            easeInOut: function(t, b, c, d) {
                if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        }
    };
    var option = json.option,
      data = json.data,
      speedArr = ["easeIn",'easeOut','easeInOut'], // 运动函数的速度
      startValue = {}, // 存放需要改变的值的属性
      changeValue = {}, // 存放需要运动的总路程
      startTime; // 起始时间 
    for (var key in data) {
      startValue[key] = parseFloat(getStyle(ele)[key])
      changeValue[key] = parseFloat(data[key]) - startValue[key];
      if (!changeValue[key]) { // 值为0
        delete startValue[key]
        delete changeValue[key]
      }
    }
    // 确定json的option选项的情况
    var speed = option && option.speed,
      easing = option && option.easing;
  
    if (typeof option === "object" ) {
      if ('easing' in option) {
        speed = Math.floor(option.speed) || 0,
        easing = option.easing;
        if (easing.toLowerCase() === 'linear') {
          easing = "Linear";
          speed = 0;
        }else{
          if (speed < 0 || speed > 2) {
            speed = 0;
          }
        }
      }else{
        easing = 'Linear';
        speed = 0;
      }
    }else{
      easing = 'Linear';
      speed = 0;
    }
  
    startTime = new Date();
    fn();
    function fn(){
      var t = new Date() - startTime, // 当前时间
        T_ = time - t;  // 还差多少时间到目标时间 如果为0，则到终点
      for (var key in changeValue) {
        var val = Tween[easing][speedArr[speed]](t,startValue[key],changeValue[key],time);
        if (T_ <= 0) { //   到终点
          val = Math.min(data[key],val);
          val = Math.max(data[key],val);
        }
        if (key.toLowerCase() === "opacity") { 
          // 是来控制透明度
          ele.style[key] = val;
          ele.style.filter = "alpha(opacity="+ val*100 +")"
        }else {
          ele.style[key] = val + "px";
        }
      }
      if(T_ <= 0){
        callback && callback.call(ele)
      }else{
        requestAnimationFrame(fn)
      }
    }
  }